<template>
  <div>
    <div class="title-msg">商品修改</div>

    <div class="option-site">
      <div class="back" @click="backClick">《返回</div>

      <div class="name item">
        <span>商品名称:</span>
        <OrdInput
                :p-input-style="{'width': '315px'}"
                p-placeholder="请输入商品名称..."
                :pMaxLength="15"
                @mBlur="mGoodsNameBlur"
                v-model="formData.name"
                class="input">
        </OrdInput>
      </div>

      <div class="goods-category-store item">
        <span>所属类目:</span>
        <select name="goods_category" v-model="formData.goods_category_id">
          <option v-for="i in goods_cid_array" :value="i.id">{{i.name}}</option>
        </select>

        <span class="store">库存:</span>
        <NumInput
                :p-input-style="{'width': '70px'}"
                p-placeholder="输入库存.."
                :p-max-length="6"
                @mBlur="mStoreBlur"
                v-model="formData.store"
                class="input"
        ></NumInput>
      </div>

      <div class="price-index item">
        <span>商品单价:</span>
        <NumInput
                :p-input-style="{'width': '90px'}"
                p-placeholder="请输入商品单价..."
                :pMaxLength="10"
                @mBlur="mPriceBlur"
                v-model="formData.price"
                class="input">
        </NumInput>

        <span class="index">商品热度:</span>
        <NumInput
                :p-input-style="{'width': '100px'}"
                :p-max-length="3"
                v-model="formData.index"
                @mBlur="mIndexBlur"
                class="index input">
        </NumInput>
      </div>

      <div class="describe item">
        <span>商品描述:</span>
        <textarea
                v-model="formData.describe"
                @blur="mDescribeBlur"
        ></textarea>
      </div>

      <ImgUpload p-title="商品图片"
                 class="goods-picture"
                 @saveImg="mSaveImg"
                 v-if="!formData.src"
      ></ImgUpload>
      <img :src="'http://127.0.0.1:3000' + formData.src"
           alt="商品图片"
           class="goods-picture"
           @click="() => {this.formData.src = ''; this.formData.imgBase = ''}"
           v-else-if="formData.src">

      <button class="add" @click="submitClick">确 认 修 改</button>

    </div>

  </div>
</template>

<script>
  // 引入公共组件
  import NumInput from 'components/common/input/numInput/IInput'
  import OrdInput from 'components/common/input/ordInput/IInput'
  import ImgUpload from "components/common/upload/ImgUpload";

  import {getGoodsCategory, updateGoods} from "network/mix";

  export default {
    name: "GoodsAlter",
    components: {
      NumInput,
      OrdInput,
      ImgUpload,
    },
    data() {
      return {
        formData: {
          id: 0, // 商品id
          name: '', // 商品名
          describe: '', // 商品描述
          price: 0, // 商品单价
          store: 0, // 商品库存
          imgBase: '', // 修改之后的商品图片
          src: '', // 商品图片
          goods_category_id: 0, // 商品所属类目,通过该商品添加者的username得到
          index: 1, // 商品热度
          user_username: '', //该商品的商家用户名
        },
        goods_cid_array: [], // 获取此用户的类目

        nameVer: false, // 验证name是否合法
        priceVer: false, // 验证价格是否合法
        indexVer: false, // 验证热度index是否合法
        describeVer: false, // 验证描述是否合法
        storeVer: false, // 验证库存是否合法
      }
    },
    created() { // 组件创建之前
      this.formData = this.$route.params.formData;
      // console.log(this.formData.id);
    },
    mounted() {
      this.mGetGoodsCategory(); // 获取该用户的全部类目
    },

    methods: {
      backClick() {
        this.$router.push('/admin/goods')
      },
      submitClick() {
        console.log(this.nameVer + '--' + this.priceVer + '--' + this.indexVer + '--' + this.storeVer + '--' + this.describeVer);
        if (this.nameVer && this.priceVer && this.indexVer && this.storeVer && this.describeVer) {
          this.mUpdateGoods();
        } else {
          this.$err_ty_toast.toShow('输入验证失败！！！', 2000);
        }

      },
      mSaveImg({imgBase}) {
        this.formData.imgBase = imgBase;
        // console.log('save---------=' + this.formData.imgBase);
      },
      mGoodsNameBlur() {
        if (this.formData.name.length > 0) {
          // this.$succ_ty_toast.toShow('成功', 2000);
          this.nameVer = true;
        } else {
          this.$err_ty_toast.toShow('商品名输入有误！！！', 2000);
          this.nameVer = false;
        }
      },
      mPriceBlur() {
        if (this.formData.price.length > 0) {
          // this.$succ_ty_toast.toShow('成功', 2000);
          this.priceVer = true;
        } else {
          this.$err_ty_toast.toShow('价格输入有误！！！', 2000);
          this.priceVer = false;
        }
      },
      mStoreBlur() {
        if (this.formData.store.length > 0) {
          // this.$succ_ty_toast.toShow('成功', 2000);
          this.storeVer = true;
        } else {
          this.$err_ty_toast.toShow('库存输入有误！！！', 2000);
          this.storeVer = false;
        }
      },
      mIndexBlur() {
        if (this.formData.index.length > 0) {
          // this.$succ_ty_toast.toShow('成功', 2000);
          this.indexVer = true;
        } else {
          this.$err_ty_toast.toShow('热度输入有误,至少为1', 2000);
          this.indexVer = false;
        }
      },
      mDescribeBlur() {
        if (this.formData.describe.length > 0) {
          // this.$succ_ty_toast.toShow('成功', 2000);
          this.describeVer = true;
        } else {
          this.$err_ty_toast.toShow('描述输入至少为5个字符', 2000);
          this.describeVer = false;
        }
      },




      /**axios网络请求方法,添加商品*/
      mGetGoodsCategory() { // 获取用户的用户名
        getGoodsCategory(0, '', this.formData.user_username, 0, 0)
          .then(res => {
            this.goods_cid_array = res.page.list;
            // console.log(res);
            // console.log(this.goods_cid_array[0].id);
          })
          .catch(error => {
            console.log(error);
          })
      },
      mUpdateGoods() { // 修改商品
        updateGoods(this.formData)
          .then(res => {
            console.log(res);
            this.$succ_ty_toast.toShow(this.formData.name + '商品修改成功', 5000);
            this.$router.push('/admin/goods');
          })
        .catch(error => {
          console.log(error);
          this.$err_ty_toast.toShow(this.formData.name + '商品修改失败！！！', 2000);
        })
      }
    }
  }
</script>

<style scoped>
  .title-msg {
    height: 60px;
    line-height: 60px;
    margin-left: 20px;
    margin-right: 20px;
    border-bottom-right-radius: 6px;
    border-bottom-left-radius: 6px;
    border: 1px solid #cdcdcd;

    text-align: center;
    font-size: 30px;

    background-color: white;
  }
  .option-site {
    position: relative;
    margin-top: 30px;
    margin-left: 20px;
    margin-right: 20px;
    height: 530px;

    border: 1px solid #cdcdcd;
    border-radius: 6px;
    background-color: #ebebeb;

    /*background-color: green;*/
  }
  .option-site .back {
    position: absolute;
    width: 50px;
    height: 25px;

    color: #919191;
    font-weight: bold;
    font-size: 16px;

    background-color: #fff;
    border-top-left-radius: 6px;
  }
  .option-site .back:hover {
    cursor: pointer;
    color: black;
    opacity: 0.75;
  }

  .item {
    margin-top: 0.5%;
    margin-left: 35%;

    height: 50px;
    width: 30%;
    line-height: 50px;

    /*background-color: yellow;*/
  }
  .item span {
    color: #4c4c4c;
    font-weight: bold;
  }
  .item .input {
    margin-top: 10px;
  }

  .goods-category-store {
    position: relative;
  }
  .goods-category-store select {
    width: 200px;
    height: 30px;
  }
  .goods-category-store .store {
    position: absolute;
    left: 275px;
  }
  .goods-category-store .input {
    position: absolute;
    right: 0;
  }

  .price-index {
    position: relative;
  }
  .price-index span.index {
    position: absolute;
    right: 100px;
  }
  .price-index .index {
    position: absolute;
    right: 0;
  }
  .goods-picture {
    position: absolute;
    margin-left: 42%;
    margin-top: 10px;
  }
  img.goods-picture {
    width: 170px;
    height: 80px;
  }

  .describe {
    position: relative;
    height: 140px;
  }
  .describe textarea {
    position: absolute;
    height: 100%;
    width: 82%;

    border: none;
    outline: none;
    border-radius: 10px;
  }
  .describe textarea:focus {
    border: 1px solid rgba(85, 167, 255, 0.6);
  }
  .option-site .add {
    position: absolute;
    left: 39%;
    bottom: 6%;

    width: 22%;
    height: 9%;

    color: white;
    font-size: 20px;

    border: none;
    outline: none;
    border-radius: 10px;
    background-color: #28a745;
  }
  .option-site .add:hover {
    cursor: pointer;
    opacity: 0.75;
  }
</style>